<template>
	<view class="booking">
		<navBar />
		<!-- 返回 -->
		<Nav :title="title" filtertitle="样品信息查询" :data="filterData" :form.sync="filterForm" :inpdata="inputData" @finsh='onFinshData' />
		<!-- tabs -->
		<view class="tabs">
			<text class="item" :class="(activeIndex == index) ? 'cursor' : ''" v-for="(item, index) in orderTabs"
				:key="item.id" @click="setActiveIndex(index)">
				{{ item.title }}
			</text>
		</view>
		<!-- 滑动容器  :style="NavHeight" style="height: calc(100vh - 209px);" height: calc(100vh - ComponentHeight+'px') -->
		<swiper class="swiper" :current="activeIndex" @change="onSwiperChange">
			<!-- 滑动项 v-for="(item,index) in orderTabs" :key="item.id"-->
			<swiper-item class="swiper-item">
				<!-- 订单详情 v-show="activeIndex == 0" -->
				<view class="orderinfo">
					<view class="bkitem">
						<view class="bkrol bkdjs">
							<text class="colorb">订单编号：<text class="sheetc">{{ orderInfo.orderNum }}</text></text>
							<text class="status bgf">{{ orderInfo.nationalLotteryNum ? '国抽' : '企抽' }}</text>
						</view>
						<view class="bkrol" v-if="orderInfo.nationalLotteryNum">
							国抽单号：<text class="names">{{ orderInfo.nationalLotteryNum }}</text>
						</view>
						<view class="bkrol">
							报价单号：<text class="colorb">{{ orderInfo.quotationNum }}</text>
						</view>
						<view class="bkrol" v-if="orderInfo.contractCode">
							合同编号：<text class="colorb">{{ orderInfo.contractCode }}</text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">业务类型：<text class="status">{{ orderInfo.businessType }}</text></text>
							<text class="colors">销售员：<text class="colorb">{{ orderInfo.salesmanName }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">检验类别：<text
									class="colorb">{{ orderInfo.inspectionCategory }}</text></text>
							<text class="colors">细分领域：<text class="colorb">{{ orderInfo.subBusiness }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">客户名称：<text class="colorb">{{ orderInfo.customerName }}</text></text>
							<text class="colors">业务类型：<text class="colorb">{{ orderInfo.businessType }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">客户编码：<text class="colorb">{{ orderInfo.customerCode }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">业务站点：<text class="colorb">{{ orderInfo.businessDept }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">订单检测价格：<text
									class="colorb colw">{{ amountInfo.testingPrice }}</text></text>
							<text class="colors">订单检测折扣价：<text
									class="colorb colw">{{ amountInfo.testingDiscount }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">订单样品附加费：<text
									class="colorb colw">{{ amountInfo.sampleSurcharge }}</text></text>
							<text class="colors">订单测试附加费：<text
									class="colorb colw">{{ amountInfo.testSurcharge }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">订单费用合计：<text
									class="colorb colw">{{ amountInfo.totalCost }}</text></text>
							<text class="colors">订单实收价格：<text
									class="colorb colrb">{{ amountInfo.actualReceived }}</text></text>
						</view>
						<view class="bkrol">
							<text class="colors">订单费用备注：<text
									class="colorb colw">{{ amountInfo.expenseRemark }}</text></text>
						</view>
						<view class="bkrol txr">
							<text>创建时间：{{ orderInfo.createdTime }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<!-- v-show="activeIndex == 1" -->
				<view class="orderinfo">
					<template v-if="issampleListValue">
						<view class="bkitem" @click="showSamplDetail(item.limsOrdNo,item.orderNum)"
							v-for="(item,index) in sampleList" :key="index">
							<view class="bkrol bkdjs">
								<text class="colorb">LIMS样品编号：<text class="sheetc">{{ item.limsOrdNo }}</text></text>
							</view>
							<view class="bkrol bkdjs">
								<text class="colorb">样品编号：<text class="sheetc">{{ item.sampleNum }}</text></text>
								<!-- <text class="status bgf">制样</text> -->
							</view>
							<view class="bkrol">
								样品名称：<text class="names">{{ item.sampleType }}</text>
							</view>
							<view class="showd">查看详情</view>
						</view>
					</template>
					<!-- 样品信息-->
					<template v-else>
						<view class="bkitem" @click="showSamplDetail(item.limsOrdNo,item.orderNum)"
							v-for="(item,index) in orderInfo.sampleInfo" :key="index">
							<view class="bkrol bkdjs">
								<text class="colorb">LIMS样品编号：<text class="sheetc">{{ item.limsOrdNo }}</text></text>
							</view>
							<view class="bkrol bkdjs">
								<text class="colorb">样品编号：<text class="sheetc">{{ item.orderNum }}</text></text>
								<!-- <text class="status bgf">制样</text> -->
							</view>
							<view class="bkrol">
								样品名称：<text class="names">{{ item.orderName }}</text>
							</view>
							<!-- <view class="bkrol bkdjs">
								<text class="colors">状态：<text class="status">已制样</text></text>
								<text class="colors">样品名称：<text class="colorb">三鲜肉抽脂肪提取DNA</text></text>
							</view>
							<view class="bkrol bkdjs">
								<text class="colors">样品日期：<text class="colorb">2012.23.15</text></text>
								<text class="colors">到期日期：<text class="colorb">2012.23.15</text></text>
							</view> -->
							<view class="showd">查看详情</view>
						</view>
					</template>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="orderinfo">
					<!-- 样品费用信息-->
					<view class="bkitem" v-for="(item,index) in amountInfo.sampleFeeInfo" :key="index">
						<view class="bkrol bkdjs">
							<text class="colorb">样品编号：<text class="sheetc">{{ item.sampleCode }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">检测价格：<text class="colorb colw">{{ item.testPrice }}</text></text>
							<text class="colors">检测折扣价：<text class="colorb colw">{{ item.testDiscount }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">样品附加费：<text
									class="colorb colw">{{ item.sampleSurcharge }}</text></text>
							<text class="colors">测试附加费：<text class="colorb colw">{{ item.testSurcharge }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">费用合计：<text class="colorb colw">{{ item.totalCost }}</text></text>
							<text class="colors">实收价格：<text class="colorb colrb">{{ item.actualReceived }}</text></text>
						</view>
						<view class="mt">费用备注：{{ item.feeRemark }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	// 引入api
	import {
		getProgramDelegationInfo, // 委托单查询
		getProgramQuotationInfo, // 报价单查询
		getProgramDelegationSamples,// 委托单样品查询
		getProgramQuotationSamples,// 报价单样品查询
		getProgramDelegationFee, // 委托单样品费用查询
		getProgramQuotationFee // 报价单样品费用查询
	} from "@/proxy/program/program.api.js";
	export default {
		async onLoad(option) {
			if (option.method === "weituo") {
				await Promise.all([
					this.getProgramDelegationInfoData(option.orderNum,option.folderNo), // 获取委托单
					// this.getProgramQuotationSamplesData(option.orderNum,option.folderNo), // 报价单样品查询 
					this.getProgramDelegationFeeData(option.orderNum,option.folderNo), // 委托单样品费用查询
				])
				// 只有委托单才有状态选择
				this.filterData = [
					{
						children: false, //是否有子项
						title: "样品状态",
						key: "sampleStatus", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [
							{
								title: "草稿",
								id: 1,
								value: 'Draft',
							},
							{
								title: "已计划",
								id: 2,
								value: 'Planned',
							},
							{
								title: "已启用",
								id: 3,
								value: 'Active',
							},
							{
								title: "已开始",
								id: 4,
								value: 'Started',
							},
							{
								title: "已完成",
								id: 5,
								value: 'Done',
							},
							{
								title: "异常",
								id: 6,
								value: 'OOS',
							},
							{
								title: "已取消",
								id: 7,
								value: 'Cancelled',
							},
							{
								title: "结果",
								id: 8,
								value: 'Resulted',
							},
							{
								title: "预记录",
								id: 9,
								value: 'Prelogged',
							},
							{
								title: "已记录",
								id: 10,
								value: 'Logged',
							}
						],
					}
				];
			} else if (option.method === "baojia") {
				await Promise.all([
					this.getProgramQuotationInfoData(option.orderNum,option.folderNo), // 获取报价单
					// this.getProgramQuotationSamplesData(option.orderNum,option.folderNo), // 报价单样品查询 
					this.getProgramQuotationFeeData(option.orderNum,option.folderNo), // 报价单样品费用查询
				])
			}
			this.method = option.method;
			this.orderNum = option.orderNum;
			this.folderNo = option.folderNo;
			// console.log("获取到的参数", option)
		},
		data() {
			return {
				title: "加载中...", // 标题
				method: "", // 请求方式
				orderNum: "", // 订单编号
				folderNo: "", // LMS订单编号
				List: [],
				orderTabs: [{
						id: 1,
						title: '基本信息'
					},
					{
						id: 2,
						title: '样品信息'
					},
					{
						id: 3,
						title: '样品费用'
					},
				],
				// activeIndex: this.orderTabs.findIndex(v => v.orderState === Number(0)),
				activeIndex: 0,
				orderInfo: {}, // 订单详情
				sampleList:[], // 订单样品列表
				sample:[], // 订单样品列表
				issampleListValue:false, // 样品列表是否有值
				amountInfo: {}, // 订单样品费用金额列表
				filterData: [],
				filterForm: {},
				inputData: [
					{
						title: "LIMS样品编号",
						placeholder:"请输入LIMS样品编号",
						inpValue:"",
						key: "ordno", //键名 接收对象名字
						required:true, // 必填
					},
					{
						title: "样品编号",
						placeholder:"请输入样品编号",
						inpValue:"",
						key: "sampleNum", //键名 接收对象名字
						required:false, // 必填
					},
				],
			}
		},
		methods: {
			// 筛选后的值
			async onFinshData(data) {
				// console.log('父组件接收子组件返回的筛选值', data)
				if (this.method === "weituo") {
					if(data.ordno === "" && data.sampleNum === "" && data.sampleStatus === ""){
						await Promise.all([
							this.getProgramDelegationInfoData(this.orderNum,this.folderNo), // 获取委托单
						])
					}else{
						if(!data.ordno){
							return this.$toast({
							  title: "LIMS样品编号不可为空",
							  icon: "none",
							});
						}
						await Promise.all([
							this.getProgramDelegationSamplesData(this.folderNo,data.ordno,data.sampleNum,data.sampleStatus), // 委托单样品查询 
							// this.getProgramDelegationFeeData(this.orderNum,this.folderNo,data.ordno,data.sampleNum), // 委托单样品费用查询
						])
					}
				} else if (this.method === "baojia") {
					if(data.ordno === "" && data.sampleNum === ""){
						await Promise.all([
							this.getProgramQuotationInfoData(this.orderNum,this.folderNo), // 获取报价单
						])
					}else{
						if(!data.ordno){
							return this.$toast({
							  title: "LIMS样品编号不可为空",
							  icon: "none",
							});
						}
						await Promise.all([
							this.getProgramQuotationSamplesData(this.folderNo,data.ordno,data.sampleNum), // 报价单样品查询 
							// this.getProgramQuotationFeeData(this.orderNum,this.folderNo,data.ordno,data.sampleNum), // 报价单样品费用查询
						])
					}
				}
			},
			// 委托单查询
			async getProgramDelegationInfoData(orderNum,folderNo) {
				const {
					customerCode,
					businessName
				} = uni.getStorageSync("userInfo");
				if (!customerCode) {
					return this.$toast({
						title: "请前往小程序授权登录",
						// icon: "error",
					});
				}
				// 发送请求
				try {
					const result = await getProgramDelegationInfo([{
						customerCode: customerCode,
						businessType: businessName,
						orderNum: orderNum,
						folderNo:folderNo
					}]);
					if (result.code == 200) {
						this.title = '委托单编号' + result.data[0].orderNum;
						this.orderInfo = result.data[0];
						this.issampleListValue = false;
						// console.log("委托单查询成功！！！", result);
					} else {
						return this.$toast({
							title: result.data.msg,
						});
					}
				} catch (error) {
					// console.log("请求失败", error);
					return this.$toast({
						title: "委托单详情查询失败",
						icon: "error",
					});
				}
			},
			// 报价单查询
			async getProgramQuotationInfoData(orderNum,folderNo) {
				const {
					customerCode,
					businessName
				} = uni.getStorageSync("userInfo");
				if (!customerCode) {
					return this.$toast({
						title: "请前往小程序授权登录",
						// icon: "error",
					});
				}
				// 发送请求
				try {
					const result = await getProgramQuotationInfo([{
						customerCode: customerCode,
						businessType: businessName,
						orderNum: orderNum,
						folderNo:folderNo
					}]);
					if (result.code == 200) {
						this.title = '报价单编号' + result.data[0].orderNum;
						this.orderInfo = result.data[0];
						this.issampleListValue = false;
						// console.log("报价单查询成功！！！", result);
					} else {
						return this.$toast({
							title: result.data.msg,
						});
					}
				} catch (error) {
					// console.log("请求失败", error);
					return this.$toast({
						title: "报价单详情查询失败",
						icon: "error",
					});
				}
			},
			// 委托单样品查询
			async getProgramDelegationSamplesData(folderNo,ordno,sampleNum,sampleStatus){
				const { customerCode,businessName } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramDelegationSamples([{
					 customerCode: customerCode,
					 businessType:businessName,
					 folderNo:folderNo,
					 ordNo:ordno, // lims样品编号
					 orderNum:sampleNum, // 样品编号
					 sampleStatus:sampleStatus, //样品状态
				  }]);
				  if (result.code == 200) {
					   // console.log("委托单样品查询！！！",result);
					   this.issampleListValue = true;
					   this.sampleList = result.data;
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "报价单样品查询失败",
				    icon: "error",
				  });
				}
			},
			// 报价单样品查询
			async getProgramQuotationSamplesData(folderNo,ordno,sampleNum){
				const { customerCode,businessName } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramQuotationSamples([{
					 customerCode: customerCode,
					 businessType:businessName,
					 folderNo:folderNo,
					 orderNum:sampleNum,  // 样品编号
					 ordNo:ordno, // lims样品编号
				  }]);
				  if (result.code == 200) {
					  this.issampleListValue = true;
					  this.sampleList = result.data;
				      // console.log("报价单样品查询！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "报价单样品查询失败",
				    icon: "error",
				  });
				}
			},
			// 委托单费用查询
			async getProgramDelegationFeeData(orderNum,folderNo) {
				const {
					customerCode,
					businessName
				} = uni.getStorageSync("userInfo");
				if (!customerCode) {
					return this.$toast({
						title: "请前往小程序授权登录",
						// icon: "error",
					});
				}
				// 发送请求
				try {
					const result = await getProgramDelegationFee([{
						customerCode: customerCode,
						businessType: businessName,
						orderNum: orderNum,
						folderNo:folderNo
					}]);
					if (result.code == 200) {
						this.amountInfo = result.data[0];
						// console.log("委托单费用查询！！！", result);
					} else {
						return this.$toast({
							title: result.data.msg,
						});
					}
				} catch (error) {
					// console.log("请求失败", error);
					return this.$toast({
						title: "委托单费用查询失败",
						icon: "error",
					});
				}
			},
			// 报价单费用查询
			async getProgramQuotationFeeData(orderNum,folderNo) {
				const {
					customerCode,
					businessName
				} = uni.getStorageSync("userInfo");
				if (!customerCode) {
					return this.$toast({
						title: "请前往小程序授权登录",
						// icon: "error",
					});
				}
				// 发送请求
				try {
					const result = await getProgramQuotationFee([{
						customerCode: customerCode,
						businessType: businessName,
						orderNum: orderNum,
						folderNo:folderNo,
					}]);
					if (result.code == 200) {
						this.amountInfo = result.data[0];
						// console.log("报价单费用查询！！！", result);
					} else {
						return this.$toast({
							title: result.data.msg,
						});
					}
				} catch (error) {
					// console.log("请求失败", error);
					return this.$toast({
						title: "报价单费用查询失败",
						icon: "error",
					});
				}
			},
			// 查看样品详情
			showSamplDetail(limsordNo, orderNum) {
				let pages =
					`/pagesClient/detection/sampldetail?limsordNo=${limsordNo}&folderNo=${this.folderNo}&orderNum=${orderNum}&method=${this.method}`;
				this.$goto(pages);
			},
			setActiveIndex(index) {
				this.activeIndex = index;
			},
			onSwiperChange(event) {
				this.activeIndex = event.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: rgb(249, 250, 251);
	// 	// height: 100vh;
	// }
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
	  background-color: #F9FAFB;
	  height: 100%;
	}
	.booking {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	// .tabpos{
	// 	position: sticky;
	// 	z-index: 99;
	// }
	// tabs
	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		margin: 15rpx 20rpx;
		background-color: rgb(246, 246, 246);
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

		.item {
			flex: 1;
			text-align: center;
			padding: 0 10rpx;
			font-size: 28rpx;
			color: #000;
			border-radius: 60rpx;
		}

		.cursor {
			color: #fff;
			background: #0081ff;
			transition: all 0.4s;
		}

		// .cursor {
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 36%;
		// 	height: 6rpx;
		// 	padding: 0 50rpx;
		// 	background-color: #0081ff;
		// 	/* 过渡效果 */
		// 	transition: all 0.4s;
		// }
	}

	.colors {
		color: #6C7381;
	}

	.colorb {
		color: #000;
	}

	.names {
		font-size: 28rpx;
		font-weight: bold;
	}

	.mt {
		margin-top: 10rpx;
	}

	.status {
		color: #FFF;
		background: #FF0000;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}

	.bgf {
		background: #0081ff;
	}

	.colw {
		color: #0081ff;
		font-weight: bold;
		font-size: 30rpx;
	}

	.colrb {
		color: #FF0000;
		font-weight: bold;
		font-size: 30rpx;
	}

	.showd {
		text-align: right;
		width: 200rpx;
		padding: 10rpx;
		text-align: center;
		color: #fff;
		margin-left: auto;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, rgba(43, 136, 254, 1), rgba(43, 136, 254, 0.5));
	}

	.txr {
		text-align: right;
		letter-spacing: 2rpx;
	}

	.bkitem {
		margin-bottom: 20rpx;
		background-color: #FFF;
		box-shadow: #bbb 0 0 8rpx;
		// padding: 20rpx 10rpx;
		padding: 0rpx 10rpx 10rpx 10rpx;
		border-radius: 15rpx;
	}

	// swiper
	.swiper {
		flex: 1;
		margin-bottom: 20rpx;

		// height: 100%;
		// height: calc(100vh - 150px);
		// background-color: rgb(241, 245, 251);
		.swiper-item {
			overflow: auto;

			.orderinfo {
				margin: 20rpx 20rpx 50rpx;
				font-size: 25rpx;

				.bkdjs {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.controls {
						color: #0081ff;

						.rolsl {
							margin-right: 10rpx;
						}
					}
				}

				.bkrol {
					padding: 10rpx 0;

					// height: 60rpx;
					// line-height: 60rpx;
					.sheetc {
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>